<template>
<section>
    <!-- 购物车按钮 -->
    <TextButton
        @click="showTrolley"
        :class="buttonStyles[buttonStatus]"
    >
        购物车
    </TextButton>
    <!-- 总价显示 -->
    <text class="total-price">{{priceTag}}</text>
    <!-- 结算按钮 -->
    <TextButton
        @click="submitTrolley"
        :class="buttonStyles[buttonStatus]"
    >
        去结算
    </TextButton>
</section>
<!-- 购物车弹出层组件 -->
<Popup ref="trolley">
    <TextButton class="clear-button" @click="clearTrolley">清空</TextButton>
    <!-- 购物车中购物清单 -->
    <scroll-view scroll-y="true">
        <view v-for="value,key in shoppingList.detail" :key="key">
            <view v-if="key in shoppingList.detail" class="trolley-list-line">
                <!-- 菜品名称 -->
                <text class="dish-name">{{key}}</text>
                <view class="counter">
                    <!-- 减购按钮 -->
                    <IconButton @click="cut(key as string,value.price)">-</IconButton>
                    <!-- 加购数量 -->
                    <text>{{value.count}}</text>
                    <!-- 加购按钮 -->
                    <IconButton @click="add(key as string,value.price)">+</IconButton>
                </view>
            </view>
        </view>
    </scroll-view>
</Popup>
</template>

<script lang="ts" setup>
import {computed, ref, watch, type Ref} from 'vue';
import {useRouter} from 'vue-router';
//导入文本按钮组件
import TextButton from './common/TextButton.vue';
//导入弹出层组件
import Popup from './common/Popup.vue';
//使用全局状态-总价、购物清单
import { usePriceStore } from '../stores/price';
import { useListStore, type ShoppingList } from '../stores/list';
import IconButton from './common/IconButton.vue';
const totalPrice=usePriceStore();
const shoppingList=useListStore();
//生成价格标签文本
const priceTag=computed<string>(()=>{
    return `￥${totalPrice.value.toFixed(2)}`;
});
//设置按钮状态
const buttonStatus=computed<string>(()=>{
    return shoppingList.length>0?'allowed':'disabled';
});
//声明标识按钮可用性状态的样式
interface ButtonStyle{
    [index:string]:string
}
const buttonStyles:ButtonStyle={
    disabled:'bar-button-disabled',
    allowed:'bar-button-allowed'
};
//注册购物车模板引用
type Trolley=InstanceType<typeof Popup>;
const trolley=ref<Trolley>();
//封装关闭购物车方法
function closeTrolley():void{
    (trolley as Ref<Trolley>).value.close();
}
//定义点击购物车按钮事件回调函数
function showTrolley():void{
    if(buttonStatus.value === 'disabled'){
        return;
    }
    if((trolley as Ref<Trolley>).value.status){
        closeTrolley();
    }else{
        (trolley as Ref<Trolley>).value.open();
    }
}
//侦听购物车清空状态
watch(shoppingList,()=>{
    if(shoppingList.length === 0){
        closeTrolley();
    }
});
//定义清空购物车事件回调函数
function clearTrolley():void{
    shoppingList.clear();
}
//定义修改购物车菜品数量函数
function modifyDishCount(key:string,price:number,count:number):void{
    const item:ShoppingList={
        [key]:{price,count}
    };
    shoppingList.update(item);
}
//定义点击加购按钮事件回调函数
function add(key:string,price:number):void{
    modifyDishCount(key,price,1);
}
//定义点击减购按钮事件回调函数
function cut(key:string,price:number):void{
    modifyDishCount(key,price,-1);
}
//注册使用路由
const router=useRouter();
//定义点击去结算按钮事件回调函数
function submitTrolley():void{
    if(buttonStatus.value === 'disabled'){
        return;
    }
    router.push({
        path:`/confirm/detail`,
    });
}
</script>

<style lang="scss" scoped>
$total-width: 100vw;
$text-height: 9.5vw;
@import '../styles/textLayout.scss';
@import '../styles/shoppingListStyle.scss';
/* 整体布局 */
section{
    width: $total-width;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* 按钮样式-可用 */
:global(.bar-button-allowed){
    color:white;
    background-color: green;
}
/* 按钮样式-不可用 */
:global(.bar-button-disabled){
    color:white;
    background-color: grey;
}
/* 总价显示文本样式 */
.total-price{
    @extend %text-layout;
    color:red;
    font-size: $text-height;
}
/* 清空按钮样式 */
:global(.clear-button){
    margin-bottom: 5vw;
    width:20vw;
    color:white;
    background-color: red;
}
/* 限制滚动列表组件最大高度 */
scroll-view{
    max-height: 40vh;
}
/* 购物车菜品清单布局样式 */
.trolley-list-line{
    @extend %shopping-list;
}
/* 购物车菜品清单菜品名称文本块最大宽度 */
.dish-name{
    max-width: 50vw;
}
/* 菜品计数器布局样式 */
.counter{
    width:20vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    @extend %shopping-list-text;
}
</style>
